<template>
  <div class="integral">
    <el-button type="primary" @click="classEdit()" icon="el-icon-plus">新增分类</el-button>
    <el-button type="primary" @click="openEditor()" icon="el-icon-share">新增规则</el-button>


    <el-collapse v-model="activeNames" @change="handleChange" accordion style="margin-top: 10px">
      <el-collapse-item v-for="(item,index) in integralList" :key="index" title="积分编码设置" :name="item.id">
        <template slot="title">
          <p class="auto-title">
            <span>{{item.name}}</span>
            <span>
            <el-button style="margin-left: 200px" @click="classEdit(item.id)" type="text" icon="el-icon-edit">编辑</el-button>
            <el-button type="text" @click="classDelete(item.id)" icon="el-icon-delete">删除</el-button></span>
          </p>
        </template>
        <el-table
          :loading="tableLoading"
          :data="tableList"
          width="100%">
          <el-table-column type="index" align="center" width="50" label="序号"/>
          <el-table-column
            prop="ruleName"
            label="父类规则名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="openEditor(scope.row.id)">编辑</el-button>
              <el-button type="text" @click="deleteEditor(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>

    <!--    <el-table class="table" :data="integralList" border>-->
    <!--      <el-table-column align="center" type="index" label="序号" width="100"/>-->
    <!--      <el-table-column align="center" prop="cateName" label="分类名称"/>-->
    <!--      <el-table-column align="center" prop="ruleName" label="父规则名称"/>-->
    <!--      <el-table-column align="center" prop="createTime" label="创建时间"/>-->
    <!--      <el-table-column align="center" label="操作">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button type="text" @click="openEditor(scope.row.id)">编辑</el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->


    <classification-edit v-if="addOrUpdateVisible" ref="classificationEdit" @refresh="classificationList()"/>
    <integral-editor ref="integralEditor" @refresh="handleChange()"/>
  </div>
</template>

<script>
  import ClassificationEdit from './classification-edit'
  import IntegralEditor from './integral-editor'

  export default {
    name: 'classification',
    data() {
      return {
        tableLoading: false,
        tableList: [],
        addOrUpdateVisible: false,
        integralList: [],
        pageIndex: 1,
        pageSize: 10,
        activeNames: null,
        totalCount: 0
      }
    },
    components: {ClassificationEdit, IntegralEditor},
    activated() {
      this.classificationList()
    },
    methods: {
      handleChange() {
        if (this.activeNames) {
          this.tableLoading = true
          this.$http({
            url: this.$http.adornUrl(`/integral-admin/integral/parent/list/${this.activeNames}`),
            method: 'post'
          }).then(res => {
            this.tableLoading = true
            this.tableList = res.data
          })
        } else {
          this.tableLoading = false
        }
      },
      // 获取数据列表
      classificationList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/integral-admin/integral/cate/list'),
          method: 'post'
        }).then(res => {
          console.log(res)
          this.integralList = res.data
        })
        // /integral/cate/list
      },
      classEdit(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.classificationEdit.init(id)
        })
      },
      openEditor(id) {
        this.$refs.integralEditor.open(id)
      },
      classDelete(id) {
        this.$confirm(`确定要进行删除操作吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/integral-admin/integral/cate/delete/${id}`),
            method: 'post',
            data: {}
          }).then(data => {
            if (data && data.code === 200) {
              this.$notify.success({
                title: '提示',
                message: '操作成功'
              })
              this.classificationList()
            } else {
              this.$notify.warning({
                title: '提示',
                message: data.msg
              })
            }
          })
        })
      },
      deleteEditor(id) {
        this.$confirm(`确定要进行删除操作吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/integral-admin/integral/parent/delete/${id}`),
            method: 'post',
          }).then(data => {
            if (data && data.code === 200) {
              this.$notify.success({
                title: '提示',
                message: '操作成功'
              })
              this.handleChange()
            } else {
              this.$notify.warning({
                title: '提示',
                message: data.msg
              })
            }
          })
        })
      },
    }
  }
</script>

<style lang="less">

  .table {
    margin-top: 20px;
  }

  .auto-title {
    margin: 0;
    flex: 1;
    display: flex;
    justify-content: space-between;
  }

  .pagination {
    margin-top: 20px;
    text-align: left;
  }
</style>
